{@debug}

Posted on 2023-06-21 by

Let's say we wanted to debug a value. In Svelte it's easy to just display the value in the site with {value}.

value:

App.svelte

<script>
	let array = [{ value: 1 }, { value: 2 }, { value: 3 }];
	let value = "";
</script>

<input bind:value />
value: {value}

{#each array as item, i}
	<li>
		<input type="number" bind:value={item.value} />
	</li>
{/each}

<style>
</style>

There is another way we can do this though, using {@debug} .

If we have the inspector open it will trigger the debugger without the need to add a breakpoint in the .svelte file, if the inspector is not open it will console.log the value.

App2.svelte

<script>
	let array = [{ value: 1 }, { value: 2 }, { value: 3 }];
	let value = "";
</script>

<input bind:value />
{@debug value}

{#each array as item, i}
	<li>
		<input type="number" bind:value={item.value} />
	</li>
{/each}

<style>
</style>

We can also use {@debug} in each blocks and if blocks..

App3.svelte

<script>
	let array = [{ value: 1 }, { value: 2 }, { value: 3 }];
	let value = "";
</script>

<input bind:value />

{#each array as item, i}
	{@debug item}
	<li>
		<input type="number" bind:value={item.value} />
	</li>
{/each}

<style>
</style>